<div {% if not embedded %}class="gcb-border-box"{% endif %}>
  <link rel="stylesheet" type="text/css" href="{{resources_path}}/questions.css"/>
  <script>
    questionData['{{instanceid}}'] = JSON.parse("{{js_data | js_string}}");
  </script>
  <script src="{{resources_path}}/grading_lib.js"></script>
  <script src="{{resources_path}}/grading.js"></script>
  <noscript>
    <div class='qt-warning'>
      {# I18N: Error message that is shown to a student when they are using a browser that does not have JavaScript enabled. #}
      {{ gettext(' JavaScript should be enabled to grade this question. ') }}
    </div>
  </noscript>

  {% if progress is defined %}
    <div class="gcb-progress-icon-holder gcb-pull-right">
      {% if progress == 1 %}
        <img src="assets/lib/completed.png"
          alt="{# I18N: Alt text for image representing student progress. #}{{ gettext('Completed') }}"
          title="{# I18N: Alt text for image representing student progress. #}{{ gettext('Completed') }}"
          class="gcb-progress-icon"/>
      {% elif progress == 0 %}
        <img src="assets/lib/not_started.png"
          alt="{# I18N: Alt text for image representing student progress. #}{{ gettext('Not yet started') }}"
          title="{# I18N: Alt text for image representing student progress. #}{{ gettext('Not yet started') }}"
          class="gcb-progress-icon"/>
      {% endif %}
    </div>
  {% endif %}

  {% block question %}
  {% endblock question %}
</div>
